<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <title>flex布局</title>
    <style>
      .study1 {
        /* 给父级添加flex属性 */
        display: flex;
        width: 800px;
        height: 300px;
        background-color: pink;
        /* 默认的主轴是 x 轴 行 row */
        /* 我们的元素是跟着主轴来排列的 */
        /* flex-direction: row; */
        /* flex-direction: row-reverse; */
        /* 我们把 y轴设置为主轴，则 x 轴就成了侧轴 */
        /* flex-direction: column; */
        flex-direction: column-reverse;
      }
      .study1 span {
        width: 150px;
        height: 100px;
        background-color: purple;
        color: #fff;
      }

      .study2 {
        display: flex;
        width: 800px;
        height: 300px;
        background-color: pink;
        /* 默认的主轴是 x 轴 row */
        flex-direction: row;
        /*  justify-content:是设置主轴上子元素的排列方式 */
        /* justify-content: flex-start; */
        /* justify-content: flex-end; */
        /* 居中对齐 */
        /* justify-content: center; */
        /* 平分剩余空间 */
        /* justify-content: space-around; */
        /* 先两边贴边，再分配剩余空间 */
        justify-content: space-between;
      }
      .study2 span {
        width: 150px;
        height: 100px;
        background-color: red;
        color: #fff;
      }
      .study21 {
        display: flex;
        width: 800px;
        height: 400px;
        background-color: pink;
        /* 主轴是 y轴 */
        flex-direction: column;
        /* justify-content: center; */
        justify-content: space-between;
      }
      .study21 span {
        width: 150px;
        height: 100px;
        background-color: red;
        color: #fff;
      }

      .study3 {
        display: flex;
        width: 600px;
        height: 400px;
        background-color: pink;
        flex-wrap: wrap;
      }
      .study3 span {
        width: 150px;
        height: 100px;
        background-color: aqua;
        color: #fff;
        margin: 10px;
      }

      .study4 {
        display: flex;
        width: 800px;
        height: 400px;
        background-color: pink;
        /* 主轴居中 */
        justify-content: center;
        /* 侧轴居中 */
        align-items: center;
      }
      .study4 span {
        width: 150px;
        height: 100px;
        background-color: aqua;
        color: #fff;
        margin: 10px;
      }

      .study5 {
        display: flex;
        width: 800px;
        height: 400px;
        background-color: pink;
        /* 换行 */
        flex-wrap: wrap;
        /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式用 align-content */
        /* align-content: flex-start; */
        /* align-content: center; */
        /* align-content: space-between; */
        align-content: space-around;
      }
      .study5 span {
        width: 150px;
        height: 100px;
        background-color: aqua;
        color: #fff;
        margin: 10px;
      }

      .study6 {
        display: flex;
        width: 600px;
        height: 300px;
        background-color: pink;
        /* flex-direction: column;
        flex-wrap: wrap; */
        /* 简写 */
        flex-flow: column wrap;
      }
      .study6 span {
        width: 150px;
        height: 100px;
        background-color: aqua;
        color: #fff;
      }

      /* 子项 */
      section {
        display: flex;
        width: 60%;
        height: 150px;
        background-color: pink;
        margin: 0 auto;
      }
      section div:nth-child(1) {
        width: 100px;
        height: 150px;
        background-color: red;
      }
      section div:nth-child(2) {
        flex: 1;
        background-color: yellow;
      }
      section div:nth-child(3) {
        width: 100px;
        height: 150px;
        background-color: blue;
      }

      p {
        display: flex;
        width: 60%;
        height: 150px;
        background-color: pink;
        margin: 100px auto;
      }
      p span {
        flex: 1;
      }
      p span:nth-child(2) {
        flex: 2;
        background-color: aqua;
      }

      .study7 {
        display: flex;
        width: 80%;
        height: 300px;
        background-color: pink;
      }
      .study7 span {
        width: 150px;
        height: 100px;
        background-color: aqua;
        margin-right: 5px;
      }
      .study7 span:nth-child(2) {
        order: -1;
      }
      .study7 span:nth-child(3) {
        /* 3号盒子下到底侧 */
        align-self: flex-end;
      }
    </style>
  </head>
  <body>
    <!-- 
        flex 用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
            当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效
            伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
        flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
        flex布局父项常见属性
           flex-direction:设置主轴方向
           justify-content:设置主轴上的子元素排列方式
           flex-wrap:设置子元素是否换行
           align-content:设置侧轴上的子元素的排列方式(多行)
           align-items:设置侧轴上的子元素排列方式(单行)
           flex-flow:复合属性，相当于同时设置了 flex-direction 和 flex-wrap
        在flex布居中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴
          默认主轴方向是x轴方向，水平向右
          默认侧轴方向是y轴方向，水平向下
        flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放在父盒子里面
          wrap换行； nowrap不换行
        align-items 和 align-content 区别
            align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
            align-content适应于换行(多行)的情况下(单行情况下无效)，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性
            总结就是单行找align-items， 多行找align-content

        flex布局子项常见属性
          flex属性定义子项目分配剩余空间，用flex表示占多少份数
             .item{
                 flex:<number>;/*default 0*/
             }
          order属性定义项目的排列顺序 数值越小，排列越靠前，默认为 0。注意：其和z-index不一样
          align-self控制子项自己在侧轴上的排列方式
    -->

    <!-- 父项 -->

    <!-- <div class="study1">
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div> -->

    <!-- <div class="study2">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
    </div> -->
    <!-- <div class="study21">
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div> -->

    <!-- <div class="study3">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
    </div> -->

    <!-- <div class="study4">
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div> -->

    <!-- <div class="study5">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
    </div> -->

    <!-- <div class="study6">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
    </div> -->

    <!-- 子项 -->

    <!-- <section>
      <div></div>
      <div></div>
      <div></div>
    </section>
    <p>
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </p> -->

    <div class="study7">
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div>
  </body>
</html>
